<template>
  <h1> Vite + Vue3 + TS </h1>
  <h2>记录鼠标移动位置</h2>
  <h2>{{ p.x }}</h2>
  <h2>{{ p.y }}</h2>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue';

const p = reactive({
  x: 0,
  y: 0,
});

// 类型推导机制 - e：(parameter) e: MouseEvent
// document.addEventListener('mousemove', e => {
//   p.x = e.pageX;
//   p.y = e.pageY;
// });

// 封装
const moveFn = (e: MouseEvent) => {
  p.x = e.pageX;
  p.y = e.pageY;
};

onMounted(() => {
  document.addEventListener('mousemove', moveFn);
});

onUnmounted(() => {
  document.removeEventListener('mousemove', moveFn);
});
</script>
